div.b_DuetGrid{
    --section_padding_block:40px;
}
@media (width >= 1000px) {
    div.b_DuetGrid{
        --section_padding_block:80px;
    }
}


/* GRID */
/* auto-fit + minmax(min(330px,100%),1fr) adds columns as the container grows
   rather than at fixed breakpoints. The min() keeps the 330px floor from
   overflowing narrow phones. Against the theme container that lands on one
   column below 818px, two to 1178px, then three up to the 1440px cap. */
.b_DuetGrid .repeater_items{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap:30px;
}
/*Medium*/
@media (width >= 600px) {
    .b_DuetGrid .repeater_items{
        row-gap:52px;
    }
}


/* ITEM */
/* Centered while the grid is a single column, flush left once it isn't.
   The single column runs to 818px, so 1000px is the first breakpoint where
   un-centering is right. */
.b_DuetGrid .item{
    text-align:center;
}
.b_DuetGrid .icon{
    width:100px;
    height:100px;
    margin-inline:auto;
    margin-bottom:15px;
}
.b_DuetGrid .icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* The theme zeroes all heading margins, so the space under the title is set
   here rather than inherited. */
.b_DuetGrid .item h3{
    margin-bottom:10px;
}
/* The description is a wysiwyg, so its closing paragraph carries the theme's
   18px bottom margin. Drop it and let the row gap do the spacing. */
.b_DuetGrid .text > :last-child{
    margin-bottom:0;
}
/*Large*/
@media (width >= 1000px) {
    .b_DuetGrid .item{
        text-align:left;
    }
    .b_DuetGrid .icon{
        margin-inline:0;
    }
}